<template>
  <div class="login">
    <vCanvasBG></vCanvasBG>
    <div class="login-main">
      <div class="login-layout" v-loading="loading" element-loading-text="登录中。。。">
        <div class="login-wrap" :style="loginWrapBg">
          <div class="login-form">
            <div class="login-title">登录</div>
            <el-form :model="loginForm" :rules="rules" ref="loginForm">
              <el-form-item prop="loginName">
                <el-input v-model="loginForm.loginName" placeholder="用户名">
                  <template slot="prepend"><span class="usernameIcon"></span></template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" placeholder="密码" v-model="loginForm.password"
                          @keyup.enter.native="submit('loginForm')" @change="passwordChange">
                  <template slot="prepend"><span class="passwordIcon"></span></template>
                </el-input>
              </el-form-item>
              <div class="login-btn">
                <el-button type="primary" @click="submit('loginForm')" :disabled="disabled">登录</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import vCanvasBG from '../views/canvasBg.vue'
  import ajax from '../../utils/ajax'
  import setRouter from '../../utils/setRouter'

  export default {
    components: {vCanvasBG},
    data () {
      return {
        loginWrapBg: {
          background: 'url(' + require('../../../static/img/login/loginForm.jpg'),
          backgroundSize: '100% 100%'
        },
        loading: false,
        disabled: true,
        loginForm: {
          loginName: '',
          password: ''
        },
        rules: {
          loginName: [
            {required: true, message: '请输入账号', toggle: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', toggle: 'blur'}
          ]
        }
      }
    },
    mounted () {
      this.result()
    },
    methods: {
      result () {
        let username = sessionStorage.getItem('username')
        if (username) {
          this.$router.push({name: 'indexItem', params: {code: '000000'}})
        }
      },
      submit (name) {
        let url = this.$api.login
        let store = this.$store
        this.loading = true
        this.$refs[name].validate((valid) => {
          if (valid) {
            let params = {
              loginName: this.loginForm.loginName,
              password: this.loginForm.password
            }
            ajax.get(url, params || {}).then((res) => {
              if (res.msg && res.msg.code === '20000') {
                let routerData = res.data.module
                let indexRouter = res.data.index
                store.dispatch('setIndexRouterData', indexRouter) // 写入首页列表
                store.dispatch('setModuleRouterData', routerData) // 写入表格页列表
                // 存储 用户信息
                sessionStorage.setItem('username', JSON.stringify(this.loginForm.loginName))
                // 存储 路由
                sessionStorage.setItem('indexRouter', JSON.stringify(indexRouter))
                sessionStorage.setItem('router', JSON.stringify(routerData))
                // 添加动态路由
                this.$router.addRoutes(setRouter.setIndex(indexRouter))
                this.$router.addRoutes(setRouter.setModule(routerData))
                this.$router.push({name: 'indexItem', params: {code: '000000'}})
              } else {
                this.$message({type: 'error', message: res.data.msg.message})
              }
              this.loading = false
            }).catch((err) => {
              if (err) throw err
              this.loading = false
              this.$message({type: 'error', message: '网络异常'})
            })
          } else {
            this.loading = false
            this.$message({type: 'error', message: '请填写用户名和密码'})
          }
        })
      },
      passwordChange () {
        // 监听密码变化
        this.$refs.loginForm.validate((valid) => {
          valid ? this.disabled = false : this.disabled = true
        })
      }
    }
  }
</script>

